<template>
	<view class="wrapper" :style="bgurl">
		<uni-nav-bar backgroundColor="#fff" left-width="160" left-icon="left" right-icon="cart" @clickLeft="backto">
			<!-- <block slot="left">
				<view>
					<text class="uni-nav-bar-text">标题栏</text>
				</view>
			</block> -->
			<block slot="right">

			</block>
		</uni-nav-bar>
		<view style="background-color:#222228">
			<view class="home-section">
				<view class="home__title">所有
				</view>
				<view class="view-mode">
					<image src="../../static/image/grid.svg" @click="changeViewMode"></image>
				</view>
				<smallView :group="recentArray" :viewMode="mode"></smallView>

			</view>
		</view>

	</view>
</template>

<script>
	import smallView from "../../components/small-view/small-view.vue"
	const host = getApp().globalData.apiurl;
	export default {
		components: {
			smallView
		},
		data() {
			return {
				recentArray: [],
				mode: "small",
			}
		},
		onLoad() {
			this.loadDefault().then(res => {
				this.recentArray = res.data;
			});
		},
		methods: {
			async loadDefault() {
				let that = this;
				return await new Promise((resolve, reject) => {
					that.$Request.post(`${host}/api/Recent?kind=Theme&top=100`, {}).then(res => {
						if (res.statusCode != 200) {
							reject(res);
							return;
						}
						resolve(res);
					}).catch(err => {

					})
				})
			},
			backto() {
				uni.navigateBack();
			},
			changeViewMode() {
				if (this.mode == "small")
					this.mode = "large";
				else
					this.mode = "small";
			}
		}
	}
</script>

<style scoped lang="scss">
	.home__title,
	.home__desc {
		padding-left: 32rpx;
		font-weight: normal;
		line-height: 42rpx;
		user-select: none;
	}

	.home__title {
		margin: 0 0 32rpx;
		padding-top:20rpx;
		font-size: 48rpx;
		color: $home-text;
	}

	.view-mode {
		display: flex;
		justify-content: flex-end;
	}

	.view-mode image {
		width: 20px;
		height: 20px;
		padding-right: 40rpx;
	}
</style>